<template>
    <div class="findList">
        <div class="wrapper">
         <!-- 头部 star  -->
         <div class="header">
            <div class="header_left">
                <router-link tag="a" to="/find" ><img :src="require('../assets/img/bar_icon_back_black.png')" alt=""></router-link>
            </div>
            <div class="header_center">
                {{findDetailsTO}}
            </div>
            <div class="header_right">
                <!-- <a href="">分类</a> -->
            </div>
        </div>
        <!-- 头部 end   -->

        <!-- 背景图 star  -->
        <div class="bg">
            <img :src="findDetailsimg" alt="">
        </div>
        <!-- 背景图 end  -->

        <!-- 大标题 star  -->
        <div class="bigTitle">
            <p>{{findDetailsTT}}</p>
        </div>
        <!-- 大标题 end  -->

        <!-- 故事数量 star  -->
        <div class="storyNum">
            <p>共{{findlists.length}}个故事</p>
        </div>
        <!-- 故事数量 end  -->

         <!-- 主体部分 star  -->
         <div class="main">
            <ul>
                <li v-for="item in findlists" :key="item.id" @click="listId(findlistId,item.id)">
                    <a>
                        <div class="img">
                            <img :src="item.img" alt="">
                            <div class="vip"></div>
                        </div>
                        <div class="word">
                            <p>{{item.name}}</p>
                            <div class="tip">
                                <p>经典 启蒙</p>
                                <p>175555次</p>
                            </div>
                        </div>
                    </a>
                </li>
                
            </ul>
        </div>
        <!-- 主体部分 end  -->
    </div>
    </div>
</template>

<script>
import { getJsonhomeType } from "../api/homeType.js";
    export default {
        data(){
            return {
                findlists:[],
                findlistId:null,//听书列表
                findDetails:null,//详情
                findDetailsTO:null,//标题一
                findDetailsTT:null,//标题二
                findDetailsimg:null,//详情大图
            }
        },
        methods:{
            listId(id,listenId){
                this.$emit("list-id",[id,listenId])
            },
        },
        created(){
            this.findlistId=this.$route.query.id;
            getJsonhomeType().then(data=>{
                this.findDetails = data.homeTypeLists.filter(item=>item.id==this.findlistId);
                this.findDetails=this.findDetails[0]
                this.findlists=this.findDetails.listen
                this.findDetailsTO=this.findDetails.titleone
                this.findDetailsTT=this.findDetails.titletwo
                this.findDetailsimg=this.findDetails.img
                console.log(this.findlists);
            })
        }
    }
</script>

<style lang="scss" scoped>
.findList{
    .wrapper{
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    /* padding-bottom: 60px; */
}
.header{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 16px;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
}
.header_left img{
    height: 20px;
    display: block;
}
.header_center{
    font-size: 18px;
    font-weight: 500;
}
.header_right a{
    color: #3e3e3e;
    font-size: 17px;
    font-weight: 600;
}

.bg img{
    display: block;
    width: 100%;
    height: 210px;
}
.bigTitle{
    padding: 0 20px;
}
.bigTitle p{
    font-size: 18px;
    height: 54px;
    line-height: 54px;
    color: #888888;
}
.storyNum{
    padding: 0 20px;
}
.storyNum p{
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    color: #888888;
}

.main{
    padding: 0 16px 52px;
}
/* .main ul{} */
.main ul li{
    padding: 7px 0;
    /* background-color: aquamarine; */
}
.main ul li a{
    display: flex;
}
.main ul li .img{
    position: relative;
}
.main ul li .img .vip{
    background: url(../assets/img/ic_shouye_vip.png) no-repeat;
    width: 38px;
    height: 15px;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0px;
}
.main ul li .img img{
    height: 96px;
    border-radius: 8px;
    display: block;
}
.main ul li .word{
    color: #141414;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 19px;
}
.main ul li .word>p{
    height: 44px;
    line-height: 44px;
}
.main ul li .word .tip{
    font-size: 16px;
    display: flex;
    color: #444444;
}
.main ul li .tip p:nth-child(1){
    padding:0 8px 0 0;

}
.main ul li .tip p:nth-child(2){
    padding-left: 16px;
    background: url(../assets/img/ic_listen_gray.webp) left center no-repeat; 
    background-size: 13px;
}
}
</style>